<template>
	<view class="select bgf5 page p10">
		<view class="rel flex flexC fs12">
			<view class="r40 flex flexC flex1 bgff px12 py4">
				<image class="sear" src="/static/img/icon/search.png" mode="aspectFill"></image>
				<input class="pl8 inp flex1 fs12" v-model="keyword" @input="search" type="text" placeholder="搜索已开通的城市">
			</view>
		</view>
		<view class="fs16 bold6 p10">当前选择城市:</view>
		<scroll-view class="list bgff boxS" scroll-y>
			<view class="fs14 bold6 c99 p12">已开通城市</view>
			<view class="flex flexC flexW aliC px10 pb10">
				<view class="py10 px2 item" v-for="(item,index) in list" :key="index" @click="clickCity(item)">
					<text class="bgf5 r4 py6">{{item.name}}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: "",
				list:[],
				isRequestIng:false
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.getCity();
		},
		methods:{
			search(e){
				this.keyword = e.detail.value;
				console.info(e.detail.value);	
				this.getCity();
			},
			
			clickCity(item){
				uni.setStorageSync("city",item.name);
				uni.navigateBack({delta:1})
			},
			
			getCity(){
				
				let param = {
				
					org_id:27,
					keyword:this.keyword
				};
				if(this.isRequestIng == true) return;
				this.isRequestIng = true;
				let that = this;
				this.$api.getCityList(param).then(res => {
				
					that.isRequestIng = false;
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.list = res.data;
						
					} else {
				
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.select {
	.sear {
		width: 24rpx;
		height: 24rpx;
	}
	.inp {
		height: 60rpx;
	}
	.list {
		height: calc(100vh - 180rpx);
		border-radius: 24rpx 24rpx 0 0;
		.item {
			width: 33.3%;
			box-sizing: border-box;
			text {
				display: inline-block;				
				width: calc(100% - 8rpx);
			}
		}
	}
}
</style>
